<template>
  <div class="page-row">
    <h3 class="page-title">row compbg--primarynt</h3>
    <div>
      
      <div class="layout__item">
        :span="1"
        <mx-row>
          <mx-col :span="1" ><div class="bg--primary">1</div></mx-col>
          <mx-col :span="1" ><div class="bg--primary">1</div></mx-col>
          <mx-col :span="11" ><div class="bg--success">11</div></mx-col>
          <mx-col :span="11" ><div class="bg--info">11</div></mx-col>
        </mx-row>
      </div>
      <div class="layout__item">
        :gutter="10"
        <mx-row :gutter="10">
          <mx-col :span="1" ><div class="bg--primary">1</div></mx-col>
          <mx-col :span="1" ><div class="bg--primary">1</div></mx-col>
          <mx-col :span="11" ><div class="bg--success">11</div></mx-col>
          <mx-col :span="11" ><div class="bg--info">11</div></mx-col>
        </mx-row>
      </div>
      <div class="layout__item" >
        :gutter="10" :offset="1"
        <mx-row :gutter="10">
          <mx-col :span="1" :offset="1"><div class="bg--primary">1</div></mx-col>
          <mx-col :span="1" :offset="1"><div class="bg--primary">1</div></mx-col>
          <mx-col :span="8" :offset="2"><div class="bg--success">8</div></mx-col>
          <mx-col :span="7" :offset="3"><div class="bg--info">7</div></mx-col>
        </mx-row>
      </div>
      
      <div class="layout__item">
        :gutter="10"
        <mx-row :gutter="10">
          <mx-col :span="2"><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="22"><div class="bg--primary">2kkk</div></mx-col>
        </mx-row>
      </div>
      <div class="layout__item">
        :gutter="10" :push="22" :pull="2"
        <mx-row :gutter="10">
          <mx-col :span="2" :push="22"><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="22" :pull="2"><div class="bg--primary">2kkk</div></mx-col>
        </mx-row>
      </div>

      <div class="layout__item">
        :gutter="10" type="flex 
        <mx-row :gutter="10" type="flex">
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
        </mx-row>
      </div>
      
      <div class="layout__item">
        :gutter="10" type="flex justify="center"
        <mx-row :gutter="10" type="flex" justify="center">
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--success">1hh</div></mx-col>
        </mx-row>
      </div>

      <div class="layout__item">
        :gutter="10" type="flex justify="end"
        <mx-row :gutter="10" type="flex" justify="end">
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
        </mx-row>
      </div>

      <div class="layout__item">
        :gutter="10" type="flex justify="center" align="middle"
        <mx-row :gutter="10" type="flex" justify="center" align="middle">
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
        </mx-row>
      </div>

      <div class="layout__item">
        :gutter="10" type="flex justify="start" align="bottom"
        <mx-row :gutter="10" type="flex" justify="start" align="bottom">
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
          <mx-col :span="2" ><div class="bg--primary">1hh</div></mx-col>
        </mx-row>
      </div>
   
    </div>
    
  </div>
</template>
<script>
export default {
  name: "page-row"
};
</script>
<style lang="scss">
.page-row {
  padding: 20px;
  
  .layout__item{
    height: 100px;
    margin: 0px 0 10px;
    padding: 10px 0;
    border-bottom: 1px solid #FF7D2E;

    &:first-child{
      border-top: 1px solid #FF7D2E;
    }
    & > div {
      height: 60px; background:#ededed;
    }
  }
  .bg--primary {
    height: 40px;
    background: #FF7D2E;
  }
  .bg--success {
    height: 40px;
    background: #00CD8F;
  }
  .bg--info {
    height: 40px;
    background: #416CFF;
  }

  .page-title {
    text-align: center;
  }
}
</style>
